<template>
  <div class="container">
    <div class="top">
      <el-card>
        <!-- 查询条件 -->
        <el-form ref="queryFormRef" :model="queryForm" label-width="100px">


          <el-row :gutter="12">
            <el-col :span="4">
              <el-form-item label="模板名称：" prop="templateName">
                <el-input v-model="queryForm.templateName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="模板类型：" prop="templateType">
                <el-select v-model="queryForm.templateType" placeholder="请选择" style="width: 100%" clearable>
                    <el-option label="硬件巡检" value="硬件巡检"> </el-option>
                    <el-option label="软件巡检" value="软件巡检"> </el-option>
                  </el-select>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="4">
              <el-form-item label="模板描述：" prop="describeInfo">
                <el-input v-model="queryForm.describeInfo"></el-input>
              </el-form-item>
            </el-col> -->

            <el-col :span="4">
              <el-form-item label="对象类型：" prop="objType" clearable >
                <el-select v-model="queryForm.objType" placeholder="请选择" style="width: 100%">
                    <el-option label="云上内网" value="云上内网"> </el-option>
                    <el-option label="云上外网" value="云上外网"> </el-option>
                    <el-option label="云下内网" value="云下内网"> </el-option>
                    <el-option label="云下外网" value="云下外网"> </el-option>
                  </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="功能类型：" prop="functionType">
                <el-input v-model="queryForm.functionType"></el-input>
              </el-form-item>
            </el-col>

            <!-- <el-col :span="4">
                <el-form-item label="时间：" prop="time">
                    <el-date-picker
                        v-model="queryForm.timeArr"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
            </el-col> -->
            <el-col :span="2">
              <el-form-item>
                <el-button @click="resetForm" type="primary" plain>重置</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item>
                <!-- <el-button  @click="add()" type="success" plain>新增数据</el-button> -->
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
    <div class="middle">
      <el-table ref="multipleTable" :data="tableData" stripe tooltip-effect="dark" style="width: 100%">
        <el-table-column label="模板名称" prop="templateName" width="200px"></el-table-column>
        <el-table-column label="模板类型" prop="templateType" width="150px"></el-table-column>
        <el-table-column label="模板描述" prop="describeInfo" width="350px"></el-table-column>
        <el-table-column label="对象类型" prop="objType" width="200px"></el-table-column>
        <el-table-column label="cron表达式" prop="cron" width="200px"></el-table-column>
        <el-table-column label="功能类型" prop="functionType" width="200px"></el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button type="success"  size="mini" @click="update(scope.row)">修改</el-button>
            <el-button type="danger"  size="mini" @click="deleteh(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryForm.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="queryForm.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

    <el-dialog
      :visible.sync="addialog"
      width="30%"
      :before-close="cancel"
    >

            <span slot="footer" class="dialog-footer">
                <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="模型名称" prop="templateName">
                    <el-input v-model="form.templateName"></el-input>
                </el-form-item>
                <el-form-item label="模板类型" prop="templateType">
                  <el-select v-model="form.templateType" placeholder="请选择" style="width: 100%">
                    <el-option label="硬件巡检" value="硬件巡检"> </el-option>
                    <el-option label="软件巡检" value="软件巡检"> </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="cron表达式" prop="cron">
                    <el-input v-model="form.cron"></el-input>
                </el-form-item>

                <el-form-item label="描述" prop="describeInfo">
                    <el-input v-model="form.describeInfo"></el-input>
                </el-form-item>

                <el-form-item label="对象类型" prop="objType">
                  <el-select v-model="form.objType" placeholder="请选择" style="width: 100%">
                    <el-option label="云上内网" value="云上内网"> </el-option>
                    <el-option label="云上外网" value="云上外网"> </el-option>
                    <el-option label="云下内网" value="云下内网"> </el-option>
                    <el-option label="云下外网" value="云下外网"> </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="功能类型" prop="functionType">
                    <el-input v-model="form.functionType"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="addSave" v-if="addflag">保存新增</el-button>
                    <el-button type="primary" @click="updateSave" v-if="updateflag">保存更新</el-button>
                    <el-button @click="cancel">取消</el-button>
                </el-form-item>
                </el-form>


            </span>
    </el-dialog>
  </div>
</template>

<script>
  window._interceptConfig = {
    collection: true, //整体开关
    click: true, //页面点击事件信息采集开关
    page: true, //页面跳转加载事件信息采集开关
    error: true, //异常信息采集开关
    http: true, //通讯信息采集开关
    name: "jyzdhywxxxtsdfx_n_prd.mart-ui-ds", //系统编号，被采集信息的系统名称。前端简称
    url: " http://apm.sd.sgcc.com.cn:19411/api/v2/spansWeb"//数据上报服务地址，根据实际情况输入
  };
</script>
<!-- src -->
<script src=" http://25.41.37.249:19411/assets/js/intercept.min.js " async></script>
<script>
  //          "@/api/system/inspection"
  import { queryInspectionTemplate ,addInspectionTemplate,updInspectionTemplate,delInspectionTemplate, queryInspectionTemplateById} from "@/api/system/inspection"
  export default {
    name: 'Hisreport',
    data() {
      return {
        
        total:0,
        // 表格数据
        tableData: null,
        // 查询参数
        updateflag:false,
        addflag:false,
        addialog:false,
        queryForm: {
          page:1,
          size:10,
          describeInfo: "",
          templateType: "",
          templateName: "",
          objType: "",
          functionType: "",
        },
        form: {
          id:"",
          describe: "",
          templateType: "",
          templateName: "",
          objType: "",
          functionType: "",
          cron: "",
        },

      }
    },
    methods: {
      handleSizeChange(val){
        this.queryForm.size = val
        this.getList()
      },
      handleCurrentChange(val){
        this.queryForm.page = val
        this.getList()
      },
      add(){
        this.addialog=true
        this.addflag=true
        this.updateflag=false
      },
      deleteh(row){

        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delInspectionTemplate(row).then(res=>{
            this.$alert(res.msg, '提示', {
            });
            this.getList()
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });




      },
      updateSave(){
        updInspectionTemplate(this.form).then(res=>{
          this.$alert(res.msg, '提示', {
          });
          this.addialog=false
          this.form.id=''
          this.$refs['form'].resetFields()
          this.getList()
        })

      },
      addSave(){
        addInspectionTemplate(this.form).then(res=>{

          this.$alert(res, '提示', {
          });
          this.addialog=false
          this.$refs['form'].resetFields()
          this.getList()

        })

      },
      cancel(){
        this.$refs['form'].resetFields()
        this.addialog=false

      },
      getList(){
        queryInspectionTemplate(this.queryForm).then(response => {

          this.total = parseInt(response.msg)
          this.tableData = response.data
          
        })
      },
      // 加载数据
      initData() {
        queryInspectionTemplate(this.queryForm).then(response => {
          this.total = parseInt(response.msg)
          this.tableData = response.data
        })
      },
      update(row){

        queryInspectionTemplateById(row).then(res=>{
          this.form=res.data
        })
        this.updateflag=true
        this.addflag=false
        this.addialog=true
      },
      // 重置表单
      resetForm(){
        this.$refs.queryFormRef.resetFields()
      },

    },
    mounted() {
      this.initData()
    },
    watch:{
      //侦听queryForm
      queryForm:{
        deep: true,
        handler(newValue,oldValue){
          this.initData()
        }
      }
    }
  }

</script>

<style>

  .middle {
    margin: 10px;
    width: 100%;
  }
</style>
